<template>
  <fragment>
    <el-form :inline="true" class="demo-form-inline" :model="formData">
      <el-form-item label="会员姓名">
        <el-input
          placeholder="请输入姓名"
          v-model="formData.username"
        ></el-input>
      </el-form-item>
      <el-form-item label="套餐名称">
        <el-input
          placeholder="请输入名称"
          v-model="formData.buy_package"
        ></el-input>
      </el-form-item>
      <el-form-item label="剩余有效期天数">
        <el-input placeholder="" v-model="formData.avaliable_date"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button
          type="success"
          icon="el-icon-search"
          @click="searchInfo"
        ></el-button>
        <el-button type="success" @click="dialogFormVisible = true"
          >添加套餐</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 弹出框 -->
    <el-dialog
      title="套餐购买登记"
      :visible.sync="dialogFormVisible"
      width="500px"
    >
      <el-form :model="formAdd">
        <el-form-item label="会员名称" :label-width="formLabelWidth">
          <el-input v-model="formAdd.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="会员账号" :label-width="formLabelWidth">
          <el-input v-model="formAdd.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="创建账户类型" :label-width="formLabelWidth">
          <el-select
            v-model="formAdd.account_type"
            placeholder="请选择活动区域"
          >
            <el-option label="黄金会员" value="黄金会员"></el-option>
            <el-option label="普通会员" value="普通会员"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="购买日期" :label-width="formLabelWidth">
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="formAdd.date"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="购买套餐" :label-width="formLabelWidth">
          <el-input v-model="formAdd.buy_package" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="收费方式" :label-width="formLabelWidth">
          <el-select v-model="formAdd.payFor" placeholder="请选择活动区域">
            <el-option label="微信" value="微信"></el-option>
            <el-option label="支付宝" value="支付宝"></el-option>
            <el-option label="银行卡" value="银行卡"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addmembersuit">确 定</el-button>
      </div>
    </el-dialog>
    <el-table :data="memberList" style="width: 100%">
      <el-table-column prop="username" label="会员姓名" width="180">
      </el-table-column>
      <el-table-column prop="buy_package" label="购买套餐" width="180">
      </el-table-column>
      <el-table-column prop="date" label="购买日期"> </el-table-column>
      <el-table-column prop="avaliable_date" label="剩余有效天数">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="5"
      style="text-align: center"
      @current-change="changepag"
    >
    </el-pagination>
  </fragment>
</template>

<script>
import { getInfo,findInfo } from "@/api";
import ajax from "@/api/ajax.js";
export default {
  name: "accountsuit",
  data() {
    return {
      memberList: [],
      dialogFormVisible: false,
      formLabelWidth: "120px",
      total:0,
      formData: {
        username: "",
        buy_package: "",
        avaliable_date: "",
      },
      formAdd: {
        username: "",
        account: "",
        account_type: "",
        date: "",
        buy_package: "",
        payfor: "",
      },
    };
  },
  methods: {
    // 分页器回调
    changepag(index) {
      if(this.formData.username || this.formData.buy_package || this.formData.avaliable_date){
        this.searchInfo(index)
      }else{
      this.getInfoAll(index);

      }
    },
    // 获取后台信息
    async getInfoAll(index = 1) {
      let result = await getInfo();
      // console.log(result);
      if (result.code === 200) {
        this.memberList = result.data.slice((index - 1) * 5, index * 5);
        this.total = result.data.length;
      }
    },
    // 添加套餐
    addmembersuit() {
      this.dialogFormVisible = false;
      let username = this.formAdd.username;
      let account = this.formAdd.account;
      let account_type = this.formAdd.account_type;
      let date = this.formAdd.date;
      let buy_package = this.formAdd.buy_package;
      ajax
        .post("http://localhost:4100/register", {
          username,
          account,
          account_type,
          date,
          buy_package,
        })
        .then((res) => {
          console.log(res);
          this.memberList = res.data.data;
        });
    },
    // 查询用户信息
    async searchInfo(_,index=1) {
      let infoObj = {}
      if(this.formData.username){
        infoObj.username = this.formData.username;
      }
      if(this.formData.buy_package){
        infoObj.buy_package = this.formData.buy_package;
      }if(this.formData.avaliable_date){
        infoObj.avaliable_date = this.formData.avaliable_date;
      }
      let result = await findInfo(infoObj);
      if(result.code ===200){

        this.memberList = result.data.slice((index - 1) * 5, index * 5)
        this.total = result.data.length
      }

    },
  },
  mounted() {
    this.getInfoAll();
    // ajax
    //   .get("http://localhost:4100/accountAll")
    //   .then((res) => {
    //     // console.log("请求成功!");
    //     this.memberList = res.data.data;
    //     // console.log(res.data.data);
    //   })
    //   .catch((err) => {
    //     console.log(err);
    //   });
  },
};
</script>

<style lang="less" scoped>
.demo-form-inline {
  margin: 10px 0;
}
</style>
